import React, { FC } from 'react';
import { NavigationProp, RouteProp } from '@react-navigation/native';
import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { CommonStyle } from '../../../common/commonStyle.ts';
import { useSelector } from 'react-redux';
import { RootState } from '../../../redux/store.ts';

interface IPersonInfoScreenProps {
  navigation: NavigationProp<any, 'personInfoScreen'>;
  route: RouteProp<{ personInfoScreen: any }, 'personInfoScreen'>;
}
const PersonInfoScreen: FC<IPersonInfoScreenProps> = ({ navigation }) => {
  const userInfo = useSelector((state: RootState) => state.userInfo);

  /**
   * 前往webview界面
   * @param uri
   * @param title
   */
  const handleGotoWebView = (uri: string, title: string) => {
    const { userId, userCode } = userInfo;
    navigation.navigate('webViewScreen', { title, uri, params: { title, userId, accessToken: userCode } });
  };

  return (
    <>
      <SafeAreaView style={styles.root}>
        <Image style={styles.avatarImg} source={{ uri: userInfo.imageUrl }} />
        <Text style={styles.text}>{userInfo.nickName}</Text>

        <View style={styles.functionBar}>
          <TouchableOpacity style={styles.functionBarItem} onPress={() => handleGotoWebView('https://kics.kanglailab.com/essentialInformation', '基本信息')}>
            <Image style={styles.functionBarItemImage} resizeMode="cover" source={require('../../../assets/images/user/personInfo/base-info.png')} />
            <Text style={styles.functionBarItemText}>基本信息</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.functionBarItem} onPress={() => handleGotoWebView('https://kics.kanglailab.com/healthInformation', '健康信息')}>
            <Image style={styles.functionBarItemImage} resizeMode="cover" source={require('../../../assets/images/user/personInfo/healthy.png')} />
            <Text style={styles.functionBarItemText}>健康信息</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.functionBarItem} onPress={() => handleGotoWebView('https://kics.kanglailab.com/socialRelations', '社会关系')}>
            <Image style={styles.functionBarItemImage} resizeMode="cover" source={require('../../../assets/images/user/personInfo/relation.png')} />
            <Text style={styles.functionBarItemText}>社会关系</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.functionBarItem} onPress={() => handleGotoWebView('https://kics.kanglailab.com/hobby', '兴趣爱好')}>
            <Image style={styles.functionBarItemImage} resizeMode="cover" source={require('../../../assets/images/user/personInfo/hobby.png')} />
            <Text style={styles.functionBarItemText}>兴趣爱好</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: 'white', alignItems: 'center', paddingTop: 30 },
  avatarImg: { width: 110, height: 110, marginBottom: 20, borderRadius: 8 },
  text: { textAlign: 'center', fontWeight: 'bold', fontSize: 16, color: CommonStyle.textColor },
  functionBar: { width: '95%', backgroundColor: 'white', paddingHorizontal: 5, marginTop: 30, borderRadius: 8, flexDirection: 'row', flexWrap: 'wrap' },
  functionBarItem: { width: '25%', justifyContent: 'center', flexDirection: 'column', paddingVertical: 12 },
  functionBarItemImage: { width: 55, height: 55, margin: 'auto' },
  functionBarItemText: { fontSize: 12, marginTop: 5, textAlign: 'center' },
});

export default PersonInfoScreen;
